<template>
  <el-dialog title="自定义权限配置项" v-model="show" width="500px" :append-to-body="true"
             :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="form">
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="配置名称">
          <el-input v-model="form.name" placeholder="请输入配置名称"></el-input>
        </el-form-item>
        <el-form-item label="配置key">
          <el-input v-model="form.key" placeholder="请输入配置项key"></el-input>
        </el-form-item>
        <el-form-item label="配置类型">
          <el-select v-model="form.type" placeholder="请选择配置类型">
            <el-option label="多选" value="checkbox"></el-option>
            <el-option label="单选" value="radio"></el-option>
            <el-option label="开关" value="switch"></el-option>
            <el-option label="下拉框" value="select"></el-option>
            <el-option label="文本框" value="input"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据项" v-if="['checkbox', 'radio', 'select'].indexOf(form.type) > -1">
          <div class="dicData">
            <div class="dicData_li" v-for="(d, di) in form.params" v-bind:key="d.id">
              <el-input size="mini" style="margin-right: 5px;" placeholder="label" v-model="d.label"></el-input>
              <el-input size="mini" style="margin-right: 5px;" placeholder="key" v-model="d.key"></el-input>
              <el-button size="mini" class="deleteBtn" type="danger" circle icon="el-icon-minus"
                         v-on:click="form.params.splice(di, 1)"></el-button>
            </div>
            <div class="dicData_li add">
              <el-button size="mini" type="text"
                         v-on:click="form.params.push({key: null, label: null})">+ 添加
              </el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button size="small" type="primary" v-on:click="onConfirmEvent" v-loading="formLoading">确定</el-button>
      <el-button size="small" type="default" v-on:click="close()">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  mixins: [],
  components: {},
  data() {
    return {
      show: false,
      form: {
        name: null,
        key: null,
        type: null,
        params: []
      },
      formLoading: false
    }
  },
  props: {},
  setup() {
  },
  mounted() {
  },
  methods: {
    /**
     * 打开对话框
     */
    open() {
      this.show = true
      this.formLoading = false
      this.form = {
        name: null,
        key: null,
        type: null,
        params: []
      }
    },
    /**
     * 关闭对话框
     */
    close() {
      this.show = false
    },

    /**
     * 保存
     */
    onConfirmEvent () {
      let self = this

      if (!this.form.name) {
        this.$message.error("请输入配置名称")
        return
      }
      if (!this.form.key) {
        this.$message.error("请输入配置key")
        return
      }
      if (!this.form.type) {
        this.$message.error("请输入配置类型")
        return
      }
      if (['checkbox', 'radio', 'select'].indexOf(this.form.type) > -1 && this.form.params.length <= 0) {
        this.$message.error("请添加数据项")
        return
      }

      self.formLoading = true
      self.callApi("addRoleParam", this.form).then(() => {
        self.formLoading = false
        self.close()
      })
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.dicData {
  display: inline-block;
  height: 100%;
  .dicData_li {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
    align-items: center;

    &.add{
      margin-bottom: 0;
    }

    :deep(.deleteBtn) {
      padding: 3px;
      min-height: 18px;
      height: 20px;
      font-size: 12px;
    }
  }
}
</style>
